<template>
  <div class="outer">
    <div id="scoller" class="scollbar" @scroll="doThis()">
      <div class="blankinner" />
    </div>
    <div id="inner" class="boxerl">
      <div id="div1" class="toolbar">
        <el-button
          class="el-icon-delete"
          size="large"
          style="border: none; height: 30px; margin-top: 9px;"
          @click="handleClear"
        />
      </div>
    </div>
    <div class="boxerh">
      <div id="div2" class="text">
        <!--可使用 min-height 实现编辑区域自动增加高度-->
        <!-- <p>请输入内容</p> -->
      </div>
    </div>
  </div>
</template>

<script>
import E from 'wangeditor'
import { getToken } from '@/utils/auth'

export default {
  name: 'Editor',
  props: {
    row: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      folder: 'garage',
      token: getToken(),
      editor: null,
      content: ''
    }
  },
  created() {
    // window.addEventListener('scroll', this.doThis)
  },
  mounted() {
    const self = this
    this.actionUrl = process.env.NODE_ENV === 'development' ? 'http://localhost:9528/dev-api/upload?folder=garage' : 'http://47.97.156.168/upload?folder=garage'
    this.editor = new E('#div1', '#div2')
    this.editor.customConfig.onchange = (html) => {
      this.$emit('on-change', html)
      this.content = html
      // this.editorContent = html
    }
    this.editor.customConfig.withCredentials = true
    this.editor.customConfig.uploadImgServer = this.actionUrl
    this.editor.customConfig.uploadImgMaxSize = 500 * 1024
    this.editor.customConfig.uploadImgHeaders = {
      'agent': 'Web',
      'token': this.token
    }
    this.editor.customConfig.uploadImgHooks = {
      before(xhr, editor, files) {
        // 图片上传之前触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
      },
      success(xhr, editor, result) {
        // 图片上传并返回结果，图片插入成功之后触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
      },
      fail(xhr, editor, result) {
        // 图片上传并返回结果，但图片插入错误时触发
      },
      error(xhr, editor) {
        // 图片上传出错时触发
      },
      timeout(xhr, editor) {
        // 图片上传超时时触发
      },

      // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
      // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
      customInsert(insertImg, result, editor) {
        // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
        const url = result.host + result.data
        insertImg(url)
        // result 必须是一个 JSON 格式字符串！！！否则报错
      }
    }
    this.editor.customConfig.customAlert = function(info) {
      self.$message.warning({
        message: '文件大小不正确,请上传500kb以下大小的图片!'
      })
    }
    this.editor.customConfig.pasteFilterStyle = false
    this.editor.create()
    this.editor.txt.html(this.row.content)
    if (this.row.state0 === 1) {
      this.editor.$textElem.attr('contenteditable', false)
    }
  },
  methods: {
    handleClear() {
      this.editor.txt.clear()
    },
    doThis() {
      var elem = document.getElementById('scoller')
      var inner = document.getElementById('inner')
      inner.scrollLeft = elem.scrollLeft
    }
  }
}
</script>

<style>
  .outer {
    position: relative;
    height: 460px;
  }
  .toolbar {
    width: 100%;
    position: relative;
    z-index: 125;
  }
  .text {
    border: 1px solid #ccc;
    height: 400px;
  }
  .boxerl {
    position: relative;
    width: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    height: 320px;
  }
  .boxerh {
    z-index: 120;
    top: 66px;
    position: absolute;
    width: 100%;
    height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .scollbar {
    width: 100%;
    overflow-x: auto;
  }
  .blankinner {
    width: 768px;
    height: 5px;
    border: 1px solid white;
  }
</style>
